// 背景遮罩层，用于确保底部内容被遮挡
.tabbar-background-mask {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px; // 足够高以覆盖TabBar
  background-color: #fff;
  z-index: 999; // 在内容之上，TabBar之下
}

.tab-bar-footer {
  width: 100%;
  
  &.fixed {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000; // 高层级确保在内容上方
    padding-bottom: env(safe-area-inset-bottom, 0);
    background-color: #fff; // 添加白色背景
  }
  
  &::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px; // 足够高以覆盖可能重叠的内容
    background-color: #fff;
    z-index: -1; // 放在TabBar后面但在内容前面
  }
  
  :global {
    .adm-tab-bar {
      border-top: 1px solid #f0f0f0;
      background-color: #fff;
      --adm-color-primary: #1677ff;
      padding-bottom: env(safe-area-inset-bottom, 0);
      box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1); // 增强阴影效果
    }
    
    .appointment-icon {
      width: 22px;
      height: 22px;
      background-color: #1677ff;
      border-radius: 50%;
      position: relative;
      
      &::before {
        content: '';
        position: absolute;
        width: 10px;
        height: 10px;
        border: 2px solid #fff;
        border-radius: 50%;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
    }
  }
} 